<style scoped>
  .autocompletebox {
    position: relative;
    display: inline-block;
    width: 100%;
  }

  .autocompletebox input.in {
    display: inline-block;
    width: 100%;
    padding: 0 12px;
    line-height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    border-radius: 0px;
    border: solid 1px rgb(220, 223, 230);
    color: #606266;
    ;
  }

  .autocompletebox .autocomplete-list {
    position: absolute;
    top: 43px;
    left: 0px;
    background: #fff;
    width: 100%;
    border: solid 1px #efefef;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 3px rgba(0, 0, 0, .01);
    min-height: 32px;
    z-index: 997;
    max-height: 390px;
    overflow: auto;
  }

  .autocompletebox .autocomplete-list ul {
    margin: 0 !important;
    padding: 0 !important;
  }

  .autocompletebox .autocomplete-list ul li {
    list-style: none;
    line-height: 38px;
  }

  .autocompletebox .autocomplete-list a {
    line-height: 38px;
    display: block;
    color: #121212;
    padding: 0 24px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .autocompletebox .autocomplete-list a.img {}

  .autocompletebox .autocomplete-list a.img img {
    float: left;
  }

  .autocompletebox .autocomplete-list a:hover {
    background: #eff9ff;
  }
</style>
<template>
  <div class="autocompletebox" v-clickoutside="handleClickOutSide">
    <input class="in" :disabled="autoStatus" v-model="keyword" @focus="focus" @blur="blur" @keyup="search">
    </input>
    <input v-model="autoId" type="hidden" />
    <div class="autocomplete-list" v-show="show">
      <div v-if="req" class="tc f18">
        <div class="dis5"></div>
        <i class="fa el-icon-loading fa-spin"></i>
      </div>
      <div v-else>
        <ul v-if="result.length > 0">
          <li><a @click="select(0, '')"><span>不选</span></a></li>
          <li v-for="item in result">
            <a @click.prevent="select(item[fkey], item[fname], item)" :class="fimg != '' ? 'img' : 'txt'">
              <span v-if="fimg != ''" class="img"><img :src="item[fimg]" width="70" /></span>
              <span v-html="item[fname]" class="font-black f14"></span>
              <span v-if="ename" v-html="'(' + item[ename] + ')'" class="font-black f14"></span>
              <span v-html="'[' + item[fkey] + ']'" class="font-gray f12"></span>
              <div class="dis5"></div>
            </a>
          </li>
        </ul>
        <ul v-else>
          <li class="font-gray2 tc">无匹配结果</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import clickoutside from '@lib/clickoutside'
  export default {
    name: 'autocomplete',
    props: ['size', 'autoId', 'autoVal', 'autoStatus', 'autoApi', 'autoParm', 'pParm', 'fkey', 'fname', 'ename', 'ftype', 'fimg'],
    data() {
      return {
        result: {},
        show: false,
        req: false,
        keyword: '',
        _autoVal: '',
        sources: []
      }
    },
    watch: {
      autoVal: function () {
        this.keyword = this.autoVal
      }
    },
    mounted: function () {
      this.keyword = this.autoVal
    },
    directives: {
      clickoutside
    },
    methods: {
      handleClickOutSide(e) {
        this.show = false
      },
      select: function (key, val, item) {
        this.show = false
        this.keyword = val
        this._autoVal = val
        this.$emit('selected', key, val, item, this.pParm)
      },
      focus: function () {
        this.keyword = ''
        this.search()
      },
      blur: function () {
        this.keyword = this._autoVal
      },
      search: function () {
        let that = this
        that.show = true
        that.req = true
        that.sources.forEach(function (item) {
          if (item !== null && item.source !== null && item.status === 1) {
            item.status = 0
            item.source.cancel('cancel')
          }
        })
        // that.sources = []
        var sc = {
          source: that.$api.axios.CancelToken.source(),
          status: 1
        }
        that.sources.push(sc)
        that.$api.hget(that.autoApi, { cancelToken: sc.source.token, params: Object.assign(that.autoParm || {}, { keyword: this.keyword }) }).then((res) => {
          if (res.status === 1) {
            that.result = res.data.list || res.data
          }
          sc.source = null
          that.req = false
        }).catch(function (thrown) {
          sc.source = null
          if (that.$api.axios.isCancel(thrown)) {
            // console.log('Request canceled', thrown.message)
          }
        })
      }
    }
  }
</script>